<template>
    <div class="people"  @click="itemClick">
        <div class="item">
            <!-- <el-avatar shape="square" :size="100" :fit="fit" :src="getPng(icon)" /> -->
            <img :src="url" :class="active? 'border': ''">
            <span style="margin-top: 6px;">{{ name }}</span>
            <div class="play">
                <play-one class="icon" theme="multi-color" size="16" :fill="['#715EF6' ,'#715EF6' ,'#715EF6' ,'#715EF6']" @click.stop="playVideo(true)"/>
            </div>
        </div>
    </div>
    <Dialog 
        :show="showDialog" 
        :title="'查看视频'" 
        :width="880"
        :isCloseTip="false" 
        :is-custom-footer="false"
        @on-close="showDialog = false;videoUrl = ''"
        @on-sure-click="showDialog = false;videoUrl = ''"
    >
        <template #content>
          <div style="margin: 0 auto;">
            <Video  :src="videoUrl" :poster="previewUrl"  />
          </div>
        </template>
    </Dialog>
</template>

<script setup lang="ts">
import {PlayOne} from '@icon-park/vue-next'
import { PeopleItem } from '@/models/components/index'
import Video from '@/components/video/video.vue'
import Dialog from '@/components/dialog/dialog.vue'
import {ref} from 'vue'
const props = defineProps<PeopleItem>()
const emits = defineEmits(['itemClick'])
const showDialog = ref<boolean>(false)
const videoUrl = ref<string>('')
const itemClick = () => {
    emits('itemClick', props.id)
}
const playVideo = () => {
    videoUrl.value = props.previewUrl;
    showDialog.value = true;
}
</script>

<style scoped lang="css">
.people {
    padding: 10px 0;
    /* margin-right: 4px; */
}
.item {
    display: flex;
    flex-direction: column;
    color: #fff;
    align-items: center;
    position: relative;
}
.item img {
    width: 78px;
    height: 104px;
    border-radius: 4px;
    border: 2px solid #fff;
}
.item .border {
    border: 2px solid #8252B3;
    box-shadow: 0 0 3px #8252B3;
    border-radius: 4px;
}
.item span {
    font-size: 12px;
}
.play {
    position: absolute;
    bottom: 20px;
    right: 0;
    z-index: 10;
    display: flex;
    background-color: rgb(255,255,255,0.8);
    border-radius: 50%;
    align-items: center;
    width: 28px;
    height: 28px;
    justify-content: center;
    cursor: pointer;
}
.play .icon {
    margin-top: 4px;
}
</style>